<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽API</title>
    <style>
        ul{
            list-style-type:none;
            margin: 0;
            padding: 0;
            width: 150px;
            background-color: blanchedalmond;
        }
        li{
            list-style-type:none;
        }
        .class-list li{
            text-align: center;
            width: 70px;
            background-color: aqua;
            margin: 10px auto ;
            height: 45px;
            line-height: 45px;
        }
        td{
            background-color: darkgray;
            width: 80px;
            height: 45px;
            text-align: center;
        }
        .title{
            text-align: center;
        }
        .cantainer{
            display: flex;
            justify-content: center;
        }
        .drop-over{
            background-color: cadetblue;
        }

    </style>
</head>

<body>
    <h1 class="title"> 课程表</h1>
    <div class="cantainer">
        <ul class="class-list" data-drop="move">
            <li data-effect="copy" draggable="true">语文</li>
            <li data-effect="copy" draggable="true">数学</li>
            <li data-effect="copy" draggable="true">英语</li>
            <li data-effect="copy" draggable="true">音乐</li>
            <li data-effect="copy" draggable="true">政治</li>
            <li data-effect="copy" draggable="true">历史</li>
            <li data-effect="copy" draggable="true">体育</li>
        </ul>
        <table>
            <th>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
                <td>星期六</td>
                <td>星期日</td>
            </th>
            <tbody>
                <tr>
                    <td rowspan="3">上午</td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                </tr>
                <tr>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                </tr>
                <tr>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                </tr>

                <tr>
                    <td rowspan="3">下午</td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                </tr>
                <tr>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                </tr>
                <tr>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        let source ;
        const container = document.querySelector('.cantainer')
        function getDropNode(node){
            while(node){
                console.log(node)
                if(node.dataset.drop){
                    return node;
                }
                node = node.parentNode ;
            }
        }
        function clearDropStyle(node){
           const dropNodes = document.querySelectorAll('.drop-over')
           dropNodes.forEach((node)=>{
                node.classList.remove('drop-over');
           })
        }
        container.ondragstart=(e)=>{
            e.dataTransfer.effectAllowed = e.target.dataset.effect;
            source = e.target;
            console.log('start',e.target)
        }
        container.ondragover=(e)=>{
            // 默认不支持拖拽，故要阻止默认事件，才会有drop事件的发生
            e.preventDefault();
            // console.log('over',e.target)
        }
        container.ondragenter=(e)=>{
            clearDropStyle();
            const dropNode = getDropNode(e.target)
            if(!dropNode){
                return ;
            }
            if(e.dataTransfer.effectAllowed===dropNode.dataset.drop){
                dropNode.classList.add('drop-over')
            }
            console.log('enter',e.target)
        }
        container.ondrop=(e)=>{
            clearDropStyle();
            const dropNode = getDropNode(e.target)
            if(!dropNode){
                return ;
            }
            if(e.dataTransfer.effectAllowed!==dropNode.dataset.drop){
                return ;
            }
            if(dropNode.dataset.drop==='copy'){
                dropNode.innerHTML='';
                const cloned = source.cloneNode(true)
                cloned.dataset.effect = 'move'
                dropNode.appendChild(cloned);
            }else{
                source.remove();
            }

            console.log('drop',e.target)
        }
    </script>
</body>

</html>